<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <!--列表-->
      <el-table :data="RList" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column type="index">
        </el-table-column>
        <el-table-column prop="name" label="实验报告名称" sortable>
        </el-table-column>
        <el-table-column prop="task_name" label="实验" sortable>
        </el-table-column>
        <el-table-column prop="account_name" label="用户" sortable>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="handlelookSim(scope.row)">查看仿真截图</el-button>
            <el-button
              size="small"
              @click="handlelook(scope.row)">查看实验报告</el-button>
            <el-button
              size="small"
              @click="handlelookReal(scope.row)">查看连线图</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
        </el-pagination>
      </el-col>

      <el-dialog
        :title='title'
        :visible.sync="dialogVisible"
        >
        <h5 v-html="text"></h5>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>

      <el-dialog
        :title='title'
        :visible.sync="dialogVisible1"
        :fullscreen="true"
      >
        <img :src="imageUrl">
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
  </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import headTop from './head.vue'
  //  import {baseUrl, baseImgPath} from '@/config/env'
  import {listReport} from '@/api/api'
  export default {
    data () {
      return {
        RList: [],
        total: 0,
        page: 1,
        text: '',
        imageUrl: '',
        title: '',
        dialogVisible: false,
        dialogVisible1: false
      }
    },
    components: {
      headTop
    },
    created () {
      this.initData()
    },
    methods: {
      // 获取设备列表
      async initData () {
        this.loading = true
        try {
          listReport(this.page).then(res => {
            this.total = res.data.count
            this.RList = res.data.results
            this.loading = false
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },
    handleCurrentChange (val) {
      this.page = val
      this.initData()
    },
      handlelook (row) {
        this.dialogVisible = true
        this.text = row.text
        this.title = row.name
      },
      handlelookSim (row) {
        this.dialogVisible1 = true
        this.imageUrl = row.SimImage
      },
      handlelookReal (row) {
        this.dialogVisible1 = true
        this.imageUrl = row.RealImage
      }
    }
  }
</script>
